<template>
	<a-modal v-bind="options">
		<vxe-grid ref="grid" :data="detail.billDetailList" :loading="loadings.detail" v-bind="gridOptions" class="bill-print-grid">
			<template #top>
				<vxe-toolbar>
					<template #buttons>
						<span>打印时间：{{ nowDate() }}</span>
						<a-divider type="vertical" />
						<span>客户：{{ detail.payerName }}</span>
					</template>
					<template #tools>
						<span>地址：{{ detail.fullHouseAddress }}</span>
					</template>
				</vxe-toolbar>
			</template>
			<template #bottom>
				<vxe-toolbar>
					<template #buttons>
						<span>应{{ detail.totalMoney < 0 ? '付' : '收' }}总额： {{ detail.totalMoney.toLocaleString() }}元</span>
						<span>（大写：{{ digitUppercase(detail.totalMoney) }}）</span>
					</template>
					<template #tools>
						<span>缴费日期：{{ formatDate(detail.predictTime) }}</span>
					</template>
				</vxe-toolbar>
			</template>
			<template #pager>制表人：{{ store.currentUser.name }}</template>
		</vxe-grid>
		<iframe id="print" v-if="grid" hidden width="100%" scrolling="no" frameborder="0" />
	</a-modal>
</template>

<script setup lang="ts">
	import {nextTick, reactive, ref, toRef, watchEffect} from 'vue'
	import {formatDate, nowDate} from 'yuxin-base/src/utils/date'
	import {digitUppercase} from '@/utils/mony.ts'
	import {getFinanceByBillId} from '@/api/bill'
	import {BillDeatil} from '@/interface/bill'
	import {VxeGridInstance, VxeGridProps} from 'vxe-table'
	import {useStore} from '@/store'

	const props = defineProps<{
		// 账单id
		id?: string
		visible: boolean
	}>()

	const store = useStore()
	const loadings = reactive({
		detail: false
	})

	const visibles = reactive({
		edit: false,
		handle: false,
		invalid: false,
		print: false
	})

	const emits = defineEmits(['update:visible', 'close'])
	const options = reactive({
		title: '打印',
		width: 900,
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		okText: '打印',
		visible: toRef(props, 'visible'),
		onOk() {
			const $print = document.querySelector('#print') as HTMLIFrameElement

			if ($print.contentDocument && $print.contentWindow) {
				$print.contentDocument.head.innerHTML = document.head.innerHTML
				$print.contentDocument.body.innerHTML = grid.value?.$el.outerHTML

				$print.contentWindow.print()
			}
		},
		onCancel() {
			emits('update:visible', false)
			setTimeout(() => emits('close'), 100)
		}
	})

	const detail = ref<BillDeatil>({
		totalMoney: 0
	})
	watchEffect(() => {
		if (props.visible && props.id) {
			loadings.detail = true
			getFinanceByBillId(props.id)
				.then(({data}) => (detail.value = data))
				.finally(() => (loadings.detail = false))
		}
	})

	const grid = ref<VxeGridInstance>()
	const gridOptions = reactive<VxeGridProps>({
		size: 'small',
		// showOverflow: true,
		rowConfig: {
			isHover: true
		},
		scrollX: {enabled: false},
		columns: [
			{
				field: 'feeSubjectValue',
				title: '费用科目',
				width: 150
			},
			{
				title: '总额',
				width: 120,
				align: 'right',
				field: 'originalMoney',
				formatter({row}) {
					return (row.feeDirection === 1 ? '+' : '-') + ' ' + row.originalMoney.toLocaleString() + ' 元'
				}
			},
			{
				title: '已收(付)',
				width: 120,
				align: 'right',
				field: 'occurredMoney',
				formatter({row}) {
					return (row.feeDirection === 1 ? '+' : '-') + ' ' + row.occurredMoney.toLocaleString() + ' 元'
				}
			},
			{
				title: '待收(付)',
				width: 120,
				align: 'right',
				field: 'notOccurredMoney',
				formatter({row}) {
					return (row.feeDirection === 1 ? '+' : '-') + ' ' + row.notOccurredMoney.toLocaleString() + ' 元'
				}
			},
			{
				title: '费用周期',
				minWidth: 220,
				formatter({row}) {
					return formatDate(row.beginTime) + ' 至 ' + formatDate(row.endTime)
				}
			}
		]
	})
</script>

<style lang="less">
	//@media print {
	.bill-print-grid {
		.vxe-toolbar {
			padding: 10px 0;
		}

		.vxe-table--header,
		.vxe-table--body {
			font-size: inherit;
		}

		.vxe-table--body-wrapper {
			overflow: hidden;
		}
		//display: none !important;
	}
	//}
</style>
